<template>
    <div>
      <el-container style="border: 1px solid #eee">
        <newLeft/>
        <el-container direction="vertical">
          <newHeader/>
          <el-main>


            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formInline.name" placeholder="姓名"></el-input>
              </el-form-item>

              <el-form-item label="性别" prop="sex">
                <el-select v-model="formInline.sex" placeholder="性别">
                  <el-option label="男" value="10"></el-option>
                  <el-option label="女" value="20"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">查询</el-button>
                <el-button @click="clearForm('formInline')">重置</el-button>
              </el-form-item>
            </el-form>



            <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="date1" label="出生日期" width="180"></el-table-column>
              <el-table-column prop="region" label="地区"></el-table-column>
              <el-table-column prop="hobby" label="爱好"></el-table-column>
              <el-table-column prop="sex" label="性别" :formatter="formatterSex"></el-table-column>
              <el-table-column prop="remark" label="备注" ></el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button @click="handleView(scope.row,'ruleForm')" type="text" size="small">查看</el-button>
                    <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>

            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    :current-page="currentPage" 
                    :page-sizes="[5, 10, 20, 40]" 
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"> 
            </el-pagination>



            <!-- 编辑页面 -->
            <el-dialog :title="dialogTitle" :visible.sync="edotDialogShow">

              <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="formDisable">
                <el-form-item label="用户名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="出生地区" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="请选择地区">
                    <el-option label="上海" value="shanghai"></el-option>
                    <el-option label="北京" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="出生时间" required>
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                      style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="是否推送" prop="push">
                  <el-switch v-model="ruleForm.push"></el-switch>
                </el-form-item>
                <el-form-item label="个人爱好" prop="hobbyNew">
                  <el-checkbox-group v-model="ruleForm.hobbyNew">
                    <el-checkbox label="足球" name="type"></el-checkbox>
                    <el-checkbox label="篮球" name="type"></el-checkbox>
                    <el-checkbox label="摄影" name="type"></el-checkbox>
                    <el-checkbox label="听歌" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="10">男</el-radio>
                    <el-radio label="20">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>
              </el-form>


              <span slot="footer" class="dialog-footer">
                <el-button @click="edotDialogShow = false">取 消</el-button>
                <el-button type="primary" @click="edotDialogShow = false">确 定</el-button>
              </span>
            </el-dialog>



          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    import newLeft from '@/components/newLeft'
    import newHeader from '@/components/newHeader'

    export default {
      name: "userList",
      components:{
        newLeft,
        newHeader
      },
      data(){
        return{
          tableData: [],
          currentPage:1,
          pagesize:5,
          formInline :{
            name:'',
            sex:''
          },
          edotDialogShow:false,
          ruleForm: {
            name: '',
            region: '',
            date1: '',
            push: false,
            sex: '',
            remark: '',
            hobbyNew:[],
            hobby:''
          },
          formDisable:false,
          dialogTitle:''
        }
      },

      //创建
      created(){
        this.handleUserList();
      },
      methods:{
        formatterSex(row, column, cellValue) {
          if (cellValue == 10) {
            return '男';
          } else {
            return '女';
          }
        },

        handleUserList() {
            // let url = 'http://localhost/vue-springboot/user/get/all';
            let url = '../../static/userList.json';
            this.$axios.get(url).then(response => {
              console.log(response.data);
              this.tableData = response.data;
            }).catch(error =>{

            });

        },

         // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
            console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log(this.currentPage+'--'+this.pagesize)  //点击第几页
        },

        onSubmit() {
          let url = 'http://localhost/vue-springboot/user/get/search';
          this.$axios.get(url,{
            params: this.formInline
          }).then(response => {
            this.tableData = response.data;
          }).catch(error =>{

          });

        },

        clearForm(formName) {
          this.$refs[formName].resetFields()
        },

        deleteRow(row){
            //console.log(row);
            const loading = this.$loading({
                lock: true,
                text: '正在删除数据中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let url = 'http://localhost/vue-springboot/user/delete'
            this.$axios.delete(url,{
                params: {
                    'id' : row.id
                }
            }).then(response => {
                loading.close();
                let tag = response.data.tag;
                let message = response.data.message;

                if (tag) {
                    this.handleUserList();
                } else {
                    this.$message({
                        message: message,
                        type: 'error'
                    });
                }
            }).catch(error =>{
                
            });
        },


        handleEdit(row) {
          //显示对话框
          this.edotDialogShow = true;

          //开启编辑
          this.formDisable = false;
          this.dialogTitle = '编辑';

          let hobs = row.hobby;
          this.ruleForm = row;
          this.ruleForm.hobbyNew = hobs.split(',');
        },

        handleView(row) {
          this.edotDialogShow = true;
          this.dialogTitle = '查看';
          //屏蔽所有form表单
          this.formDisable = true;

          let hobs = row.hobby;
          //console.log(hobs.split(','))

          this.ruleForm = row;
          this.ruleForm.hobbyNew = hobs.split(',');



        }


      }
    }
</script>

<style scoped>

</style>
